<template>
  <footer class="main-footer">
    <!-- 移动端折叠面板 -->
    <div class="mobile-footer" v-if="isMobile">
      <div class="footer-container">
        <!-- 订阅部分 -->
        <div class="subscription-block">
          <h2>Join The List & Get 20% Off</h2>
          <p>+ free shipping on your first order</p>
          <p>and even more <a href="#" class="perks-link">more perks</a> when you create an account.</p>

          <div class="subscription-form">
            <a-input
              v-model:value="email"
              placeholder="Email Address"
              :status="emailError ? 'error' : ''"
            />
            <a-button type="primary" @click="submitSubscription">
              <right-outlined />
            </a-button>
          </div>
          <div class="error-message" v-if="emailError">{{ emailError }}</div>

          <div class="terms-agreement">
            <a-checkbox v-model:checked="isTermsAgreed">
              By joining, you agree to LANNUAN List <a href="#">Terms & Conditions</a>. You can unsubscribe from marketing emails at any time. See our <a href="#">Privacy Policy</a> for additional details.
            </a-checkbox>
          </div>
        </div>

        <!-- 折叠面板 -->
        <div v-for="(section, index) in footerSections" :key="index">
          <a-collapse ghost expandIconPosition="end" :bordered="false" style="border-bottom: 1px solid #000000;">
            <a-collapse-panel :key="index" :showArrow="true">
              <template #header>
                <div class="xs-only-header">{{ section.title }}</div>
              </template>
              <ul class="footer-links">
                <li v-for="(link, linkIndex) in section.links" :key="linkIndex">
                  <a v-if="link.text === 'Feedback'" :href="link.url" @click.prevent="handleFeedbackClick">{{ link.text }}</a>
                  <a v-else-if="link.id" :href="`/classify/${link.url}-${link.id}.html`">{{ link.text }}</a>
                  <a v-else :href="link.url">{{ link.text }}</a>
                </li>
              </ul>
            </a-collapse-panel>
          </a-collapse>
        </div>

        <!-- 社交媒体图标 -->
        <div class="social-icons">
          <a href="#"><instagram-outlined /></a>
          <a href="#"><facebook-outlined /></a>
<!--          <a href="#"><tiktok-outlined /></a>-->
          <a href="#"><youtube-outlined /></a>
          <a href="#"><twitter-outlined /></a>
        </div>

        <!-- 地点选择 -->
        <div class="location">
          <environment-outlined />
          <a href="#">United States</a>
        </div>

        <!-- 公司信息 -->
        <div class="company-info-mobile">
          <p>Lannuan Clothing LLC</p>
          <p>2108 N STREET, STE N,SACRAMENTO CA, 95816</p>
          <p>+1 945 308 8836</p>
          <p>Lannuan@Lannuan.net</p>
        </div>

        <!-- 版权信息 -->
        <div class="copyright">
          <p>© LANNUAN? Inc. 2025 All rights reserved.</p>
          <div class="copyright-links">
            <a href="#">Terms & Conditions</a>
            <a href="#">Privacy Policy</a>
            <a href="#">Your Privacy Choices <span class="privacy-icon">⚑</span></a>
          </div>
        </div>
      </div>
    </div>

    <!-- 桌面端布局 -->
    <div class="desktop-footer" v-else>
      <div class="footer-container">
        <a-row :gutter="[30, 40]" justify="center">
          <a-col :xs="24" :sm="12" :md="6" :lg="4" v-for="(section, index) in footerSections" :key="index">
            <div class="footer-column">
              <div class="section-title">{{ section.title }}</div>
              <ul class="footer-links non-xs-links">
                <li v-for="(link, linkIndex) in section.links" :key="linkIndex">
                  <a v-if="link.text === 'Feedback'" :href="link.url" @click.prevent="handleFeedbackClick">{{ link.text }}</a>
                  <a v-else-if="link.id" :href="`/classify/${link.url}-${link.id}.html`">{{ link.text }}</a>
                  <a v-else :href="link.url">{{ link.text }}</a>
                </li>
              </ul>
            </div>
          </a-col>

          <!-- 公司信息作为新列 -->
          <a-col :xs="24" :sm="24" :md="12" :lg="4">
            <div class="company-info">
              <div class="section-title">Company</div>
              <p>Lannuan Clothing LLC</p>
              <p>2108 N STREET, STE N,SACRAMENTO CA, 95816</p>
              <p>+1 945 308 8836</p>
              <p>Lannuan@Lannuan.net</p>
            </div>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="8">
            <div class="footer-subscription">
              <h2>Join The List & Get 20% Off</h2>
<!--              <p>+ free shipping on your first order</p>-->
              <p>+ even more perks when you create an account.</p>

              <div class="subscription-form">
                <a-input
                  v-model:value="email"
                  placeholder="Email Address"
                  size="large"
                  :status="emailError ? 'error' : ''"
                >
                  <template #suffix>
                    <a-tooltip title="Subscribe">
                      <ArrowRightOutlined @click="submitSubscription" style="cursor: pointer;" />
                    </a-tooltip>
                  </template>
                </a-input>
              </div>
              <div class="error-message" v-if="emailError">{{ emailError }}</div>

              <div class="terms-agreement">
                <a-checkbox v-model:checked="isTermsAgreed">
                  <div style="font-size: 11px;">By joining, you agree to LANNUAN List <a href="/terms">Terms & Conditions</a>. You can unsubscribe from marketing emails at any time. See our <a href="/privacypolicy">Privacy Policy</a> for additional details.</div>
                </a-checkbox>

                <div class="validTerms" v-if="showIsTerms">
                  Please agree to Terms & Conditions
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 验证邮箱弹窗 -->
    <VerifyEmail
      :email="email"
      :visible="verifyEmailVisible"
      @update:visible="verifyEmailVisible = $event"
      @success="handleVerifySuccess"
    />
  </footer>
</template>

<script setup>
import { ref, onMounted, onUnmounted, inject } from 'vue';
import {
  RightOutlined,
  EnvironmentOutlined,
  InstagramOutlined,
  FacebookOutlined,
  YoutubeOutlined,
  TwitterOutlined,
  ArrowRightOutlined
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import VerifyEmail from '@/components/VerifyEmail/index.vue';

// 从App.vue中注入打开反馈组件的方法
const openFeedback = inject('openFeedback');

// 响应式检测是否为移动端
const isMobile = ref(false);

// 添加邮箱和条款同意状态
const email = ref('');
const isTermsAgreed = ref(false);
const showIsTerms = ref(false);
const emailError = ref('');

// 邮箱验证弹窗状态
const verifyEmailVisible = ref(false);

const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768;
};

// 验证邮箱格式
const validateEmail = (email) => {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
};

// 提交订阅
const submitSubscription = () => {
  // 验证邮箱
  if (!email.value) {
    emailError.value = 'Please enter your email address';
    return;
  }

  if (!validateEmail(email.value)) {
    emailError.value = 'Please enter a valid email';
    return;
  }

  // 验证条款同意
  if (!isTermsAgreed.value) {
    showIsTerms.value = true;
    message.error('Please agree to Terms & Conditions');
    return;
  }

  // 清除错误信息
  emailError.value = '';

  // 校验通过，显示验证邮箱弹窗
  verifyEmailVisible.value = true;
  showIsTerms.value = false;
};

// 验证邮箱成功的回调
const handleVerifySuccess = () => {
  // 提交订阅逻辑
  message.success('Subscription successfully！');
  email.value = '';
  isTermsAgreed.value = false;
  verifyEmailVisible.value = false;
};

// 处理点击反馈按钮
const handleFeedbackClick = (e) => {
  e.preventDefault();
  if (openFeedback) {
    openFeedback();
  } else {
    // 如果 inject 失败，提供备用方案
    message.info('Feedback功能暂时不可用，请稍后再试');
  }
};

// 直接导出一个打开反馈组件的方法，可以从外部调用
const openFeedbackComponent = () => {
  if (openFeedback) {
    openFeedback();
    return true;
  }
  console.error('openFeedback function not available in MainFooter');
  message.info('Feedback功能暂时不可用，请稍后再试');
  return false;
};

// 为了兼容外部调用，直接导出
defineExpose({
  openFeedbackComponent
});

// 页脚导航数据
const footerSections = [
  {
    title: 'Account',
    links: [
      { text: 'Register', url: '/login?tab=register' },
      { text: 'Sign in', url: '/login' },
      { text: 'Orders', url: '/login?tab=order' },
      { text: 'Returns', url: '/login?tab=return' },
      { text: 'LANNUAN List', url: '/user/cart' },
      // { text: 'Sign-up for text', url: '#' },
    ]
  },
  {
    title: 'Assistance',
    links: [
      { text: 'Lannuan Story', url: '/sustainability' },
      { text: 'Blog', url: '/blog' },
      { text: 'Customer care', url: '/help' },
      { text: 'Feedback', url: '#' },
      // { text: 'Size charts', url: '#' },
      // { text: 'Store locator', url: '#' },
      // { text: 'LANNUAN services', url: '#' },
      // { text: 'Apple Pay', url: '#' },
      // { text: 'Klarna', url: '#' },
      // { text: 'Gift cards', url: '#' }
    ]
  },
  {
    title: 'Departments',
    links: [
      { text: 'New in', url: 'new-in',id: 3 },
      { text: 'Clothing', url: 'clothing',id: 4 },
      { text: 'Warm Weather', url: 'warm-weather',id: 5 },
      { text: 'Dresses', url: 'dresses',id: 6 },
      { text: 'Shoes', url: 'shoes',id: 7 },
      { text: 'Lingerie & Nightwear', url: 'lingerie--nightwear',id: 8 },
      { text: 'shop by Fit', url: 'shop-by-fit',id: 9 },
      { text: 'Accessories', url: 'accessories',id: 10 }
    ]
  }
];

onMounted(() => {
  checkMobile();
  window.addEventListener('resize', checkMobile);
});

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile);
});


</script>

<style lang="scss" scoped>
.main-footer {
  /*background-color: #fff;*/
  padding: 40px 0;
  color: #333;
  /*border-top: 1px solid #eee;*/

  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
  }

  // 桌面端样式
  .desktop-footer {
    .footer-column {
      width: 100%;
      margin-bottom: 20px;

      .section-title {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          margin-bottom: 10px;

          a {
            color: #333;
            font-size: 12px;
            display: block;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    .footer-subscription {
      text-align: start;
      width: 100%;

      h2 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      p {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 5px;
      }

      .subscription-form {
        display: flex;
        margin: 20px 0;

        .ant-input {
          height: 50px;
          border-right: none;
          border-radius: 0;
        }

        .ant-btn {
          border-radius: 0;
          background-color: #000;
          border-color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .terms-agreement {
        font-size: 12px;
        line-height: 1.4;

        .validTerms {
          color: #ff4d4f;
          font-size: .75rem;
          margin-top: 6px;
        }

        a {
          text-decoration: underline;
          color: #333;
        }
      }

      .error-message {
        color: #ff4d4f;
        font-size: 12px;
        margin-top: -15px;
        margin-bottom: 15px;
      }
    }

    .company-info {
      text-align: start;
      border-left: 1px solid #eeeeee;
      padding-left: 10px;

      .section-title {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      p {
        margin-bottom: 5px;
        font-size: 14px;
      }
    }
  }

  // 移动端样式
  .mobile-footer {
    .subscription-block {
      background-color: #f5f5f5;
      padding: 20px;
      margin-bottom: 20px;

      h3 {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      p {
        font-size: 12px;
        margin-bottom: 5px;
      }

      .perks-link {
        text-decoration: underline;
        color: #333;
      }

      .subscription-form {
        display: flex;
        margin: 20px 0;

        .ant-input {
          border-right: none;
          border-radius: 0;
        }

        .ant-btn {
          border-radius: 0;
          background-color: #000;
          border-color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .terms-agreement {
        font-size: 10px;
        line-height: 1.4;

        a {
          text-decoration: underline;
          color: #333;
        }
      }

      .error-message {
        color: #ff4d4f;
        font-size: 12px;
        margin-top: 5px;
        margin-bottom: 10px;
      }
    }

    .xs-only-header {
      text-align: start;
      font-weight: bold;
      font-size: 14px;
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      text-align: start;

      li {
        margin-bottom: 5px;

        a {
          color: #171717;
          font-size: 13px;
          display: block;
          padding: 5px 0;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .ant-collapse {
      .ant-collapse-header {
        padding: 15px 0;
        border-bottom: 1px solid #eee;
      }

      .ant-collapse-content-box {
        padding: 10px 0;
      }
    }

    .social-icons {
      display: flex;
      justify-content: center;
      margin: 30px 0;

      a {
        color: #333;
        font-size: 24px;
        margin: 0 10px;
      }
    }

    .location {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;

      a {
        color: #333;
        margin-left: 5px;
      }
    }

    .company-info-mobile {
      text-align: center;
      margin: 20px 0;
      font-size: 12px;
      color: #666;

      p {
        margin-bottom: 5px;
      }
    }

    .copyright {
      text-align: center;
      font-size: 12px;
      color: #666;

      p {
        margin-bottom: 10px;
      }

      .copyright-links {
        display: flex;
        flex-direction: column;
        align-items: center;

        a {
          color: #666;
          margin: 5px 0;
        }

        .privacy-icon {
          display: inline-block;
          margin-left: 5px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .main-footer {
    .footer-container {
      padding: 0 20px;
    }

    .non-xs-links {
      display: none;
    }
  }
}

@media (min-width: 769px) {
  .main-footer {
    .xs-only-collapse {
      display: none;
    }

    .xs-only-header {
      display: none;
    }
  }
}
</style>

